<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <base href="<%=basePath%>">
    
    <title>${ webpageTitle }</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	
	<script src="rp/scripts/boot.js" type="text/javascript"></script>
	
	<style type="text/css">
	   	
    </style>
	
  </head>
  
  <body class="body-fit">
  	
  	<div class="mini-toolbar" borderStyle="border:0;">
  		<table style="width: 100%;">
  			<tr>
  				<td style="width: 100%;">
  					<input id="name" class="mini-textbox" emptyText="请输入角色名称" onenter="search()"/>
       				<a class="mini-button" iconCls="icon-search" onclick="search()">查询</a>
  				</td>
  				<td style="white-space:nowrap;">
  					<span style="color: red;">（注：左侧为备选角色，右侧为已选角色）</span>
  				</td>
  			</tr>
  		</table>
    	
    </div>
  	<div class="mini-fit">
  		
  		<div style="width: 300px; height: 260px; float: left; margin: 5px 0 5px 5px;">
  			<div id="waitAllotRolesGrid" class="mini-datagrid" style="width:100%; height:100%;" borderStyle="border:1;"
	            url="rp/system/roleMng/getAllotRoles?userId=${ userId }&target=wait" idField="id" 
	            borderStyle="border-left:0;border-right:0;" 
	            allowResize="false" showPager="false"
	            allowCellSelect="true" multiSelect="true"
	            onrowdblclick="adds();">
	            <div property="columns">
	                <div type="checkcolumn"></div>
	                <div field="name" width="50" headerAlign="center">角色名称</div>    
	                <div field="remark" headerAlign="center">备注</div>
	            </div>
	        </div>
  		</div>
  		<div style="width: 60px; height: 120px; text-align:center; float: left; margin-top: 60px;">
  			<input type="button" value=">" title="加入" onclick="adds()" style="width:40px;"/><br />
            <input type="button" value=">>" title="全部加入" onclick="addAll()" style="width:40px;"/><br />
            <input type="button" value="&lt;&lt;" title="全部移除" onclick="removeAll()" style="width:40px;"/><br />
            <input type="button" value="&lt;" title="移除" onclick="removes()" style="width:40px;"/><br />
  		</div>
  		<div style="width: 200px; height: 260px; float: left; margin: 5px 0 5px 0px;">
  			
  			<div id="hasRolesGrid" class="mini-datagrid" style="width:100%; height:100%;" borderStyle="border:1;"
	            url="rp/system/roleMng/getAllotRoles?userId=${ userId }&target=has" idField="id" 
	            borderStyle="border-left:0;border-right:0;" 
	            allowResize="false" showPager="false"
	            allowCellSelect="true" multiSelect="true"
	            onrowdblclick="removes();">
	            <div property="columns">
	                <div type="checkcolumn"></div>
	                <div field="name" width="60" headerAlign="center">角色名称</div>    
	                <!-- <div field="remark" width="120" headerAlign="center">备注</div> -->
	            </div>
	        </div>
  		</div>
  		
    </div>  
    <div class="mini-toolbar" style="padding: 5px;" borderStyle="border:0;">
        <a class="mini-button" style="width:60px;" onclick="onOk()">确定</a>
        
        <a class="mini-button" style="width:60px;" onclick="onCancel()">取消</a>
    </div>
  	
	<script type="text/javascript">
		var grid;
		var grid2;
		
		$(function(){
			mini.parse();
			grid = mini.get("waitAllotRolesGrid");
			grid.load();
			grid2 = mini.get("hasRolesGrid");
			grid2.load();
		});
		
		function search() {
            var name = mini.get("name").getValue();
            grid.load({ name: name });
        }
		
		function setSelectData(data){
			
		}
		
		//获取选中的数据
		function getSelectData() {
	        var rows = grid2.data;
	        return rows;
	    }
		
		function adds() {
            var items = grid.getSelecteds();
            grid.removeRows(items);
            grid2.addRows(items);
        }
        function addAll() {
            var items = grid.getData();       
            grid.removeRows(items);
            grid2.addRows(items);
        }
        function removes() {
            var items = grid2.getSelecteds();
            grid2.removeRows(items);
            grid.addRows(items);
        }
        function removeAll() {
            var items = grid2.getData();
            grid2.removeRows(items);
            grid.addRows(items);
        }
		
		//////////////////////////////////
	    function closeWindow(action) {
	        if (window.CloseOwnerWindow) return window.CloseOwnerWindow(action);
	        else window.close();
	    }

	    function onOk() {
	    	closeWindow("ok");
	    }
	    function onCancel() {
	    	closeWindow("cancel");
	    }
	</script>
  </body>
</html>
